<template>
  <div>
    <!-- 选项式 - 计算属性（可以通过 setter 修改） -->
    <div>姓：<input type="text" v-model="firstName" /></div>
    <div>
      名：
      <input type="text" v-model="lastName" />
    </div>
    <div>姓名：{{ fullName }}</div>
    <button @click="changeFullName">修改 fullName</button>

    <hr />

    <!-- 函数式 - 计算属性（只支持一个 getter 函数不允许修改值） -->
    <div>姓名：{{ fullNameFn }}</div>
    <button @click="fullNameFn = '铁头'">修改 fullNameFn</button>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";

let firstName = ref("张");
let lastName = ref("三");

// // 选项式 - 计算属性（可以通过 setter 修改）
const fullName = computed<string>({
  get() {
    return firstName.value + " " + lastName.value;
  },
  set(value: string) {
    [firstName.value, lastName.value] = value.split(" ");
  },
});

const changeFullName = () => {
  fullName.value = "李 四";
};

// *********************************************************************************
// *********************************************************************************
// *********************************************************************************

let firstName1 = ref("张");
let lastName1 = ref("三");

// 函数式 - 计算属性（只支持一个 getter 函数不允许修改值）
const fullNameFn = computed(() => firstName1.value + " " + lastName1.value);
</script>
